<template>
  <div class="app-container">
    <div class="content-box">
      <el-tabs type="card">
        <el-tab-pane label="数据汇总">
          <el-descriptions
            class="margin-top"
            :column="5"
            size=""
            direction="vertical"
            border
          >
            <el-descriptions-item
              labelStyle="text-align: center;"
              contentStyle="text-align: center;"
            >
              <template slot="label"> 可提现金额 </template>
              0.00
            </el-descriptions-item>
            <el-descriptions-item
              labelStyle="text-align: center;"
              contentStyle="text-align: center;"
            >
              <template slot="label"> 冻结金额 </template>
              100
            </el-descriptions-item>
            <el-descriptions-item
              labelStyle="text-align: center;"
              contentStyle="text-align: center;"
            >
              <template slot="label">累计金额 </template>
              200
            </el-descriptions-item>
            <el-descriptions-item
              labelStyle="text-align: center;"
              contentStyle="text-align: center;"
            >
              <template slot="label"> 已提现金额 </template>
              100
            </el-descriptions-item>
            <el-descriptions-item
              labelStyle="text-align: center;"
              contentStyle="text-align: center;"
            >
              <template slot="label">操作 </template>
              <el-button type="primary" size="small">提现</el-button>
            </el-descriptions-item>
          </el-descriptions>
        </el-tab-pane>
        <el-tab-pane label="交易明细">
          <el-table v-loading="loading" :data="trade_info.list" row-key="id">
            <!-- <el-table-column type="selection" align="center" /> -->
            <el-table-column prop="log_id" label="ID" width="80" />
            <el-table-column
              prop="supply_price_ratio"
              label="订单编号"
              width="100"
            >
              <template slot-scope="scope">
                {{ scope.row.order_goods.goods_sn }}
              </template>
            </el-table-column>
            <el-table-column prop="starttime" label="商品信息">
              <template slot-scope="scope">
                <div>商品名称：{{scope.row.order_goods.goods_title}}</div>
                <div>规格编码：{{scope.row.order_goods.goods_sn}}</div>
                <div>价格：{{scope.row.order_goods.goods_price}}元</div>
                <div>数量：{{scope.row.order_goods.goods_num}}</div>
              </template>
            </el-table-column>
            <el-table-column
              prop="supply_price"
              label="供货金额"
              align="center"
            />
            <el-table-column prop="order_sum" label="订单状态" align="center">
              <template slot-scope="scope">
                {{ scope.row.order.status_text }}
              </template>
            </el-table-column>

            <el-table-column
              prop="status_text"
              label="货物状态"
              align="center"
            />
          </el-table>
          <pagination
            v-show="trade_info.total_page > 0"
            :total="trade_info.total_page"
            :page.sync="trade_info.page"
            :limit.sync="trade_info.pageSize"
            @pagination="getList"
          />
        </el-tab-pane>
        <el-tab-pane label="提现记录">
          <el-table v-loading="loading" :data="withdraw_info.list" row-key="id">
            <el-table-column prop="log_id" label="ID" width="80" />
            <el-table-column
              prop="withdraw_sn"
              label="提现单号"
            />
            <el-table-column
              prop="withdraw_price"
              label="提现金额"
              align="center"
            />
            <el-table-column
              prop="createtime"
              label="申请提现时间"
              align="center"
            />
            <el-table-column prop="withdraw_sn" label="收款账号" align="center" />
            <el-table-column prop="status_text" label="提现状态" align="center" />
          </el-table>
          <pagination
            v-show="withdraw_info.total_page > 0"
            :total="withdraw_info.total_page"
            :page.sync="withdraw_info.page"
            :limit.sync="withdraw_info.pageSize"
            @pagination="getList"
          />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import { tradelist, withdrawlist } from "@/api/financialSettlement";
import pagination from "@/components/Pagination";

export default {
  name: "FinanceIndex",
  components: {
    pagination,
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      trade_info: {
        total_page: 0,
      },
      withdraw_info: {
        total_page: 0,
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询列表 */
    getList() {
      this.loading = false;
      tradelist().then((res) => {
        this.trade_info = res.data;
      });
      withdrawlist().then((res) => {
        this.withdraw_info = res.data;
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.textalign {
  text-align: center;
}
img {
  width: 100%;
}
</style>
